<template>
  <el-dialog @closed="resetForm" @open="setWorks" :close-on-click-modal="false" :append-to-body="true"
             :before-close="cancelFun" :title="dialogTitle" :visible.sync="valueModel">
    <div class="searchPersonnel">
      <el-input placeholder="请输入身份证搜索" v-model="identityId">
        <el-button slot="append" icon="el-icon-search" class="searchBtn" :disabled="btnLoading" @click="search">
          <span v-show="!btnLoading">搜索</span>
          <span v-show="btnLoading" class="el-icon-loading"></span>
        </el-button>
      </el-input>
    </div>
    <el-descriptions class="margin-top" title="" :column="1" size="medium" border>
      <el-descriptions-item label="姓名">
        {{ form.name }}
      </el-descriptions-item>
      <el-descriptions-item label="人才家园的用户名">
        {{ form.userName }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="性别">
        <template v-if="form.male">
          {{ form.male ? '男' : '女' }}
        </template>
      </el-descriptions-item> -->
      <el-descriptions-item label="手机号" :label-style="{
        width: '140px'
      }">
        {{ form.phoneNumber }}
      </el-descriptions-item>
    </el-descriptions>
    <!--    <el-form :model="form" :rules="rules" ref="ruleForm" >-->
    <!--      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">-->
    <!--        <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"></el-input>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="性别" :label-width="formLabelWidth" prop="male">-->
    <!--        <el-radio-group v-model="form.male">-->
    <!--          <el-radio :label="true">男</el-radio>-->
    <!--          <el-radio :label="false">女</el-radio>-->
    <!--        </el-radio-group>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="手机号" :label-width="formLabelWidth" prop="phoneNumber">-->
    <!--        <el-input v-model="form.phoneNumber" autocomplete="off" placeholder="请输入手机号"></el-input>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="职务" :label-width="formLabelWidth" prop="OfficialRank">-->
    <!--        <el-select v-model="form.OfficialRank" placeholder="请选择职务">-->
    <!--          <el-option label="无,未明确的" value="NONE"></el-option>-->
    <!--          <el-option label="负责人" value="ADMINSTRATOR"></el-option>-->
    <!--          <el-option label="主管" value="DIRECTOR"></el-option>-->
    <!--          <el-option label="干事" value="WOKER"></el-option>-->
    <!--        </el-select>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="部门" :label-width="formLabelWidth" prop="deptId">-->
    <!--        <el-select v-model="form.deptId" placeholder="请选择部门" @change="getWorkList">-->
    <!--          <el-option :label="data.name" v-for="(data, index) in departments" :key="index" :value="data.id"></el-option>-->
    <!--        </el-select>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelFun()">取 消</el-button>
      <el-button type="primary" @click="addBeforeFun">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "addPersonnel",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: "新员工入职"
    },
    departments: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      btnLoading: false,
      identityId: '',
      formLabelWidth: '130px',
      teams: [],
      form: {
        name: '',
        male: null,
        phoneNumber: '',
        deptId: '',
        OfficialRank: 'NONE',
        autoCreateAccount: false
      },

      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
      }
    }
  },
  model: {
    prop: "value",
    event: "change",
  },
  computed: {
    valueModel() {
      return this.value
    },
    userInfo() {
      return this.$store.state.userInfo
    },
    employeeInfo() {
      return this.$store.state.employeeInfo
    },
  },
  methods: {
    resetForm() {
      // this.$refs.ruleForm.resetFields();
    },
    async search() {
      this.btnLoading = true

      if (!this.identityId) {
        this.$message.error('身份证号不能为空！');
      } else if (!(/(^\d{15})|(^̲\d{17}([0-9]|X))/.test(this.identityId))) {
        this.$message.error('身份证号格式错误！');
      } else {
        this.btnLoading = true;
        const res = await this.$axios.post('/graphql', {
          query: `{
            corporationWorkerQueryRepository {
              findByIndentityIdAndUserTypeCodeFromRcjy(identityId: "${this.identityId}", userTypeCode: "${this.employeeInfo.organization.id}") {
                id
                userName
                name
                phoneNumber
                email
                identityId
              }
            }
          }`
        })
        if (res.data.errors) {
          // this.$message.error('业务繁忙，请稍后再试！')
        } else {
          const findByIdentityId = res.data.data.corporationWorkerQueryRepository?.findByIndentityIdAndUserTypeCodeFromRcjy;
          console.log();
          if (findByIdentityId) {
            this.form = {
              userName: findByIdentityId?.userName,
              name: findByIdentityId?.name,
              // male: this.getGenderByIdNumber(this.identityId) === '1' ? "男" : "女",
              identityId: findByIdentityId?.identityId,
              phoneNumber: findByIdentityId?.phoneNumber,
              deptId: '',
              OfficialRank: 'NONE',
              autoCreateAccount: false
            }
            this.btnLoading = false
          } else {
            this.btnLoading = false
            this.$message.error('未查询到相关人员，请输入正确的身份证号查询')
          }
        }
      }
      this.btnLoading = false;
    },
    /** 根据身份证判断性别*/
    getGenderByIdNumber(idNumber) {
      if (idNumber) {
        let genderCode;
        if (idNumber.length === 18) {
          genderCode = idNumber.charAt(16);
        } else if (idNumber.length === 15) {
          genderCode = idNumber.charAt(13);
        }
        else {
          this.$message.error('请输入正确的身份证号码')
        }
        if (genderCode && !isNaN(genderCode)) {
          if (parseInt(genderCode) % 2 === 0) {
            return '2';
          }
          return '1';
        }
      } else {
        this.$message.error('缺少身份证号码')
      }
    },
    setWorks() {
      this.teams = this.departments.length === 0 ? [] : this.departments[0].getTeams
    },
    getWorkList() {

    },
    cancelFun() {
      this.$emit('change', false)
      this.identityId = '';
      this.form = {
        name: '',
        male: null,
        phoneNumber: '',
        deptId: '',
        OfficialRank: 'NONE',
        autoCreateAccount: false
      };
    },
    addBeforeFun() {
      this.addFun()
    },
    async addFun() {
      if(this.$common.isEmpty(this.form.userName)){
        this.$message.error('未查到用户名')
        return
      }
      if(this.$common.isEmpty(this.form.name)){
        this.$message.error('未查到姓名')
        return
      }
      if(this.$common.isEmpty(this.form.phoneNumber)){
        this.$message.error('未查到手机号')
        return
      }
      const aRes = await this.$axios.post('/graphql', {
        query: `mutation{ rcjyLoginScene {
                  createEmp(
                    identifier: "${this.form.userName}"
                    name: "${this.form.name}"
                    organId: "${this.employeeInfo.id}"
                    phone: "${this.form.phoneNumber}"
                  )
                }}`
      })
      if (!aRes.data.errors) {
        this.$message.success('添加成功')
        this.$emit('updateData')
        this.$emit('change', false)
      } else {
        // this.$message.error(aRes.data.errors[0].message)
      }


    },
  },

}
</script>
<style lang="scss">
.searchPersonnel {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  margin-bottom: 20px;

  & .el-input__inner {
    border-radius: 0;
  }

  & .el-input-group__append {
    border-radius: 0;
  }

  & .el-button {
    border-radius: 0;
  }

}

.searchBtn {
  color: #FFFFFF !important;
  background-color: #2f8cec !important;
}
</style>
